<template>
  <div id="studentMassage">
    <a-table :columns="columns" :data="dataList" style="margin-top: 20px">
      <template #uplocad="{ record }">
        <a-upload
          :before-upload="handleUpload"
          :show-upload-list="false"
          :disabled="record.statu !== '未就业'"
        >
          <a-button type="primary">上传简历</a-button>
        </a-upload>
      </template>
      <template #optional="{ record }">
        <a-button type="primary" @click="provide(record)">查看简历</a-button>
      </template>
      <template #teaProvide="{ record }">
        <a-button type="primary" @click="teaProvide(record)"
          >老师提供岗位查看
        </a-button>
      </template>
      <template #submit="{ record }">
        <a-button type="primary" @click="submit(record)">提交审核</a-button>
      </template>
    </a-table>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    //只显示一条数据
    const dataList = ref([
      {
        id: "1",
        sid: "xxxxxxxxxx",
        username: "张三",
        statu: "未就业",
      },
    ]);

    const newCompany = ref("");
    const newJob = ref("");

    const columns = [
      {
        title: "学号",
        dataIndex: "sid",
      },
      {
        title: "学生姓名",
        dataIndex: "username",
      },
      {
        title: "就业状态",
        dataIndex: "status",
      },
      {
        title: "上传简历",
        slotName: "uplocad",
      },
      {
        title: "查看简历",
        slotName: "optional",
      },
      {
        title: "老师提供岗位查看",
        slotName: "teaProvide",
      },
      {
        title: "提交审核",
        slotName: "submit",
      },
    ];

    const addprofile = (record) => {
      console.log("上传简历");
    };
    const provide = (record) => {
      console.log("查看简历");
    };
    const teaProvide = (record) => {
      console.log("老师提供岗位查看");
    };

    const submit = (record) => {
      console.log("提交审核");
    };
    // 处理文件上传的逻辑
    const handleUpload = (file) => {
      // 这里可以处理上传文件的逻辑，例如将文件保存到服务器或进行其他操作
      console.log("上传文件:", file);
      // 上传成功后，可以将文件信息保存到 `record` 对象中，以便后续使用
      // record.resume = file;
    };
    return {
      newCompany,
      newJob,
      dataList,
      columns,
      addprofile,
      handleUpload,
    };
  },
};
</script>

<style scoped>
#jobProvided {
  /* 可以添加一些样式进行自定义 */
}

.container {
  display: flex;
  align-items: center; /* 让内容垂直居中 */
}

.input-group {
  margin-right: 10px; /* 设置输入框组的右边距 */
}

.add-button {
  margin-left: 10px; /* 设置按钮左边距 */
}
</style>
